<template>
  <div>
    <div class="community" v-for="community of props.dataList" :key="community.id" @click="toDetail(community.id)">
      <div class="title">
        <div v-html="community.content"></div>
      </div>
      <div style="display: flex; font-size: 14px; color: 787878">
        <div>
          发布于&nbsp;{{ titleUtil.formatDateToYYYYMMDD(community.createTime) }}&nbsp;·&nbsp;
        </div>
        <div>{{ titleUtil.numberTo(community.reviewCount) }}&nbsp;回答</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import titleUtil from '@/util/titleUtil'
import { useRouter } from 'vue-router'

const props = defineProps({
  dataList: {
    type: Array,
    required: true,
    default: () => []
  }
})
const router = useRouter()
const toDetail = (id) => {
  router.push({
    name: 'CommunityDetail',
    params: {
      id: id
    }
  })
}
</script>

<style scoped lang="scss">
$fontColor: #ff5100;

.community {
  padding: 10px;
  border-bottom: 1px #eee solid;
}
.title {
  font-weight: 600;
  padding: 10px 0;
  &:hover {
    cursor: pointer;
    color: $fontColor;
  }
}
</style>
